<template>
  <div class="divBox">
    <el-row :gutter="24">
      <el-col class="ivu-mb mb10 dashboard-console-visit">
        <el-card :bordered="false" dis-hover>

          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                <span class="ivu-pl-8">订单</span> -->
                <div class="header_title">收益统计</div>
              </div>
              <div class="checkTime">

                <el-radio-group size="small" v-model="queryForm.timeLable" @change="changeh(queryForm.timeLable)">
                  <el-radio-button :label="1">当天</el-radio-button>
                  <el-radio-button :label="2">昨天</el-radio-button>
                  <el-radio-button :label="3">前天</el-radio-button>
                  <el-radio-button :label="4">最近三天</el-radio-button>
                  <el-radio-button :label="5">最近一周</el-radio-button>
                  <el-radio-button :label="6">本月</el-radio-button>
                  <el-radio-button :label="7">上月</el-radio-button>
                  <el-radio-button :label="8">最近三个月</el-radio-button>
                </el-radio-group>
                <el-date-picker v-model="queryForm.timeVal" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small"
                                type="daterange" placement="bottom-end" start-placeholder="开始日期"
                                end-placeholder="结束日期" style="width: 250px;" @change="onchangeTime"
                                :picker-options="pickerOptions" :default-time="['00:00:00', '23:59:59']"
                />
                <el-radio-group size="small" v-model="queryForm.type" @change="changeTime(queryForm.type)">
                  <el-radio-button :label="0">分时统计</el-radio-button>
                  <el-radio-button :label="1">按天统计</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div  style="border-bottom:1px solid #e6ebf5;padding: 0px 10px 20px" >
            <div align="middle" >
              <a-row>
                <a-col :span="4" >
                  <a-statistic :precision="2" title="总预计收益(revenue)" :value="res.report?res.report.ydc_sumrevenue+res.report.lhfd_sumrevenue:0" />
                </a-col>
                <a-col :span="4" >
                  <a-statistic :precision="2" title="总实际收益(apirevenue)" :value="res.report?res.report.ydc_sumapirevenue+res.report.lhfd_sumapirevenue:0" />
                </a-col>
                <a-col :span="4" >
                  <a-statistic :precision="2" title="ydc预计收益(revenue)" :value="res.report?res.report.ydc_sumrevenue:0" />
                </a-col>
                <a-col :span="4" >
                  <a-statistic title="ydc实际收益(apirevenue)" :value="res.report?res.report.ydc_sumapirevenue:0" />
                </a-col>
                <a-col :span="4" >
                  <a-statistic title="lhfd预计收益(revenue)" :value="res.report?res.report.lhfd_sumrevenue:0" />
                </a-col>
                <a-col :span="4" >
                  <a-statistic title="lhfd实际收益(apirevenue)" :value="res.report?res.report.lhfd_sumapirevenue:0" />
                </a-col>
              </a-row>
            </div>
          </div>
          <echarts-from ref="userChart" :echartsTitle="line" :xAxis="xAxis" :seriesData="series"
                        :legend-data="legendData"
          ></echarts-from>



          <el-table :data="dataList" v-loading="dataListLoading"
                    style="width: 100%;" size="mini" :highlight-current-row="true"
                    :header-cell-style=" {fontWeight:'bold'}">
            <!--        <el-table-column prop="id" label="主键" >-->
            <!--        </el-table-column>-->
            <el-table-column prop="remark" label="账户" >
            </el-table-column>
            <el-table-column prop="ecpm" label="ecpm" />
            <el-table-column prop="apiecpm" label="api_ecpm" />
            <el-table-column prop="revenue" label="revenue" />
            <el-table-column prop="apirevenue" label="api_revenue" />
            <el-table-column prop="createDate" label="统计时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { chartUserApi, getAddChart } from '@/api/dashboard'
import echartsFrom from '@/components/echarts/index'
import api from '@/api/api'

export default {
  name: 'user-chart',
  components: { echartsFrom },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '当天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              // end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '前天',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 2)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三天',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '本月',
            onClick(picker) {
              const now = new Date()
              const start = new Date(now.getFullYear(), now.getMonth(), 1)
              const end = new Date()
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '上月',
            onClick(picker) {
              // const now = new Date();
              const start = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)
              const end = new Date(new Date().getFullYear(), new Date().getMonth(), 0)
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const now = new Date()
              const start = new Date(now.getFullYear(), new Date().getMonth() - 3, 1)
              const end = new Date(now.getFullYear(), new Date().getMonth(), 0)
              picker.$emit('pick', [start, end])
            }
          }]
      },
      line: 'line',
      circle: 'circle',
      xAxis: [],
      res: {},
      series: [],
      xData: [],
      y1Data: [],
      y2Data: [],
      lists: [],
      bing_data: [],
      bing_xdata: [],
      legendData: ['ecpm', 'revenue', 'apiecpm', 'apirevenue'],
      seriesUser: [],
      chartBuy: {},
      queryForm: {
        type: 0,
        timeLable: 1,
        start: '',
        end: '',
        timeVal: []
      },
      selOptions: {},
      dataList: [],
      dataListLoading:false
    }
  },
  mounted() {
    this.changeh(1)
    //this.getDataList()
  },
  methods: {
    getDataList() {
      this.dataListLoading = true
      this.dataListLoading = true
      let postData = {
        'order': 'desc',
        'column': 'id'
      }
      Object.assign(postData, this.queryForm, this.tableForm)
      api.post('rest/vabc/deviceadincome/list', postData).then(res => {
        this.res=res
        this.dataList = res.datalist
        this.tableForm.total = res.total
      }).finally(() => {
        this.dataListLoading = false
      })
    },
    changeTime(type) {
      console.info(type)
      if (type === 0) {
        this.queryForm.timeLable = 1
        this.changeh(1)
      } else {
        this.queryForm.timeLable = 5
        this.changeh(5)
      }
    },
    changeh(timeLable) {
      let start = new Date()
      let end = new Date()
      let type = timeLable
      if (type === 2) {
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
      } else if (type === 3) {
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
        end.setTime(end.getTime() - 3600 * 1000 * 24 * 2)
      } else if (type === 4) {
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
      } else if (type === 5) {
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
      } else if (type === 6) {
        start = new Date(start.getFullYear(), start.getMonth(), 1)
        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
      } else if (type === 7) {
        start = new Date(start.getFullYear(), start.getMonth() - 1, 1)
        end = new Date(new Date().getFullYear(), new Date().getMonth(), 0)
      } else if (type === 8) {
        start = new Date(start.getFullYear(), start.getMonth() - 3, 1)
        end = new Date(new Date().getFullYear(), new Date().getMonth(), 0)
      }

      this.queryForm.timeVal = [start, end]
      this.queryForm.start = this.formattedTime(start) + ' 00:00:00'
      this.queryForm.end = this.formattedTime(end) + ' 23:59:59'
      this.getStatistics()

    },
    formattedTime(date) {
      const year = date.getFullYear()
      const month = ('0' + (date.getMonth() + 1)).slice(-2)
      const day = ('0' + date.getDate()).slice(-2)
      const hour = ('0' + date.getHours()).slice(-2)
      const minute = ('0' + date.getMinutes()).slice(-2)
      const second = ('0' + date.getSeconds()).slice(-2)
      return `${year}-${month}-${day}`
    },
    onchangeTime(e) {
      if (e) {
        this.queryForm.start = e[0] + ' 00:00:00'
        this.queryForm.end = e[1] + ' 23:59:59'
        this.queryForm.timeLable = ''
      } else {
        this.queryForm.start = ''
        this.queryForm.end = ''
      }
      this.getStatistics()
    },
    // 统计
    getStatistics() {
      let postData = {
        'start': this.queryForm.start,
        'end': this.queryForm.end,
        'type': this.queryForm.type
      }
      // Object.assign(postData, this.queryForm)

      getAddChart(postData).then(async res => {
        // res = {"05-24":25,"05-25":22,"05-26":21,"05-27":15,"05-28":10,"05-29":24,"05-30":29,"05-31":25,"06-01":15,"06-02":11,"06-03":13,"06-04":17,"06-05":19,"06-06":22,"06-07":50,"06-08":37,"06-09":21,"06-10":12,"06-11":7,"06-12":10,"06-13":20,"06-14":28,"06-15":18,"06-16":15,"06-17":16,"06-18":5,
        //   "06-19":21,"06-20":27,"06-21":11,"06-22":9,"06-23":4};
        this.res = res
        this.legendData= ['lhfd_ecpm','lhfd_apiecpm', 'lhfd_revenue',  'lhfd_apirevenue','ydc_ecpm', 'ydc_apiecpm','ydc_revenue',  'ydc_apirevenue'],
        this.dataList=res.datalist
        this.xAxis=res.time
        let data1 = [];for (let key in res.cdoList[0]) {data1.push(res.cdoList[0][key])}
        let data2 = [];for (let key in res.cdoList[1]) {data2.push(res.cdoList[1][key])}
        let data3 = [];for (let key in res.cdoList[2]) {data3.push(res.cdoList[2][key])}
        let data4 = [];for (let key in res.cdoList[3]) {data4.push(res.cdoList[3][key])}
        let data5 = [];for (let key in res.cdoList[4]) {data5.push(res.cdoList[4][key])}
        let data6 = [];for (let key in res.cdoList[5]) {data6.push(res.cdoList[5][key])}
        let data7 = [];for (let key in res.cdoList[6]) {data7.push(res.cdoList[6][key])}
        let data8 = [];for (let key in res.cdoList[7]) {data8.push(res.cdoList[7][key])}

        // let data2 = []
        // for (let key in res.cdoData2) {
        //   data2.push(res.cdoData2[key])
        //   //this.xAxis.push(key)
        // }
        // let data3 = []
        // for (let key in res.cdoData3) {
        //   data3.push(res.cdoData3[key])
        //   //this.xAxis.push(key)
        // }
        // let data4 = []
        // for (let key in res.cdoData4) {
        //   data4.push(res.cdoData4[key])
        //   // this.xAxis.push(key)
        // }
        // this.legendData= {
        //   data:['ecpm','revenue','apiecpm','apirevenue']
        // }
        this.series = [
          {
            data: data1,
            name: 'lhfd_ecpm',
            type: 'line',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            areaStyle: {
              normal: {
                opacity: 0.1
              }
            }
          },{
            data: data3,
            name: 'lhfd_apiecpm',
            type: 'line',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            areaStyle: {
              normal: {
                opacity: 0.1
              }
            }
          }, {
            data: data2,
            name: 'lhfd_revenue',
            type: 'line',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            areaStyle: {
              normal: {
                opacity: 0.1
              }
            }
          },  {
            data: data4,
            name: 'lhfd_apirevenue',
            type: 'line',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            areaStyle: {
              normal: {
                opacity: 0.1
              }
            }
          },
          {
            data: data5,
            name: 'ydc_ecpm',
            type: 'line',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            areaStyle: {
              normal: {
                opacity: 0.1
              }
            }
          }, {
            data: data7,
            name: 'ydc_apiecpm',
            type: 'line',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            areaStyle: {
              normal: {
                opacity: 0.1
              }
            }
          }, {
            data: data6,
            name: 'ydc_revenue',
            type: 'line',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            areaStyle: {
              normal: {
                opacity: 0.1
              }
            }
          }, {
            data: data8,
            name: 'ydc_apirevenue',
            type: 'line',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            areaStyle: {
              normal: {
                opacity: 0.1
              }
            }
          }

        ]
        // this.bing_data = res.bing_data;
        // this.bing_xdata = res.bing_xdata;
      })
    },
    // 监听页面宽度变化，刷新表格
    handleResize() {
      if (this.series && this.series.length !== 0) this.$refs.userChart.handleResize()
      if (this.series) this.$refs.visitChart.handleResize()
    }
  },
  beforeDestroy() {
    if (this.visitChart) {
      this.visitChart.dispose()
      this.visitChart = null
    }
  }
}
</script>

<style scoped lang="scss">
.acea-row {
  ::v-deep.el-avatar--small {
    width: 22px;
    height: 22px;
    line-height: 22px;
  }
}

.header_title {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  padding-left: 8px;
  position: relative;

  &::before {
    position: absolute;
    content: '';
    width: 2px;
    height: 18px;
    background: #1890FF;
    top: 0;
    left: 0;
  }
}

.ivu-pl-8 {
  margin-left: 8px;
  font-size: 14px;
}

.dashboard-console-visit {
  ::v-deep.el-card__header {
    padding: 14px 20px !important;
  }

  ul {
    li {
      list-style-type: none;
      margin-top: 12px;
    }
  }
}

.trees-coadd {
  width: 100%;
  height: 100%;

  .scollhide {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

.scollhide::-webkit-scrollbar {
  display: none;
}

.names {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 84%;
  margin-bottom: -7px;
}
</style>
